<template>
  <div class="form-page">
    <Card :bordered="false" :dis-hover="true">
      <p slot="title" style="color: #666">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px"
        ></span>
        会员信息
      </p>
      <p slot="extra" style="color: #999; font-size: 12px">
        <label style="color: #ff3b30">*</label> 为必填
      </p>
      <Form
        ref="formModel"
        :rules="ruleValidate"
        :model="bloc.form"
        :label-width="100"
        label-position="right"
      >
        <FormItem
          label="品牌商:"
          prop="companyId"
          required
          v-if="tepee === '1' && !idx"
        >
          <CompanySeletorSingle
            :companyId="bloc.form.companyId"
            @on-change="(value) => companyChange(value)"
            v-if="tepee === '1'"
          ></CompanySeletorSingle>
        </FormItem>
        <FormItem label="经销商:" prop="agentId" v-if="tepee === '1' && !idx">
          <i-select v-model="bloc.form.agentId" filterable clearable>
            <i-option
              v-for="item in bloc.sortList"
              :value="item.id"
              :key="item.id"
              >{{ item.agentName }}</i-option
            >
          </i-select>
        </FormItem>
        <FormItem label="手机号:" prop="phone" required v-if="!idx">
          <Input
            type="text"
            autocomplete="off"
            :disabled="idx ? true : false"
            v-model="bloc.form.phone"
            placeholder="请填入手机号码"
            maxlength="11"
            style="width: 100%"
          />
        </FormItem>
        <FormItem label="昵称:" prop="nickname">
          <Input
            :disabled="!isSave"
            v-model="bloc.form.nickname"
            placeholder="请填写昵称"
            maxlength="11"
            style="width: 100%"
          />
        </FormItem>
        <FormItem label="生日:" prop="birthday">
          <DatePicker
          :disabled="!isSave"
            style="width: 100%"
            type="date"
            placeholder="出生日期"
            v-model="bloc.form.birthday"
          ></DatePicker>
        </FormItem>
        <FormItem label="身高(cm):" prop="height">
          <InputNumber
          :disabled="!isSave"
            v-model="bloc.form.height"
            :max="300"
            :min="10"
            :step="5"
            placeholder="请填写身高"
            size="large"
            style="width: 100%"
          />
        </FormItem>
        <FormItem label="体重(Kg):" prop="weight">
          <InputNumber
          :disabled="!isSave"
            v-model="bloc.form.weight"
            :max="300"
            :min="10"
            :step="10"
            placeholder="请填写体重"
            size="large"
            style="width: 100%"
          />
        </FormItem>
        <FormItem label="性别:" prop="sex">
          <RadioGroup v-model="bloc.form.sex">
            <Radio :disabled="!isSave" label="0">男</Radio>
            <Radio :disabled="!isSave" label="1">女</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="职业:" prop="career">
          <CheckboxGroup v-model="bloc.career">
            <Checkbox
            :disabled="!isSave"
              v-for="item in bloc.careerList"
              :key="item.labelId"
              :label="item.labelId"
              >{{ item.labelname }}</Checkbox
            >
          </CheckboxGroup>
        </FormItem>
        <FormItem label="爱好:" prop="hobby">
          <CheckboxGroup v-model="bloc.hobby">
            <Checkbox
            :disabled="!isSave"
              v-for="item in bloc.hobbyList"
              :key="item.labelId"
              :label="item.labelId"
              >{{ item.labelname }}</Checkbox
            >
          </CheckboxGroup>
        </FormItem>
        <FormItem label="社区功能禁用:" prop="commentStatus">
          <RadioGroup v-model="bloc.form.commentStatus">
            <Radio :disabled="!isSave" :label="1">是</Radio>
            <Radio :disabled="!isSave" :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
      </Form>
      <div style="margin: 20px 0px 35px 25px">
        <router-link :to="{ path: '/member' }">
          <Button style="width: 100px; height: 40px">返回</Button>
        </router-link>
        <Button
          type="primary"
          style="margin-left: 30px; width: 100px; height: 40px"
          :loading="btnload.loading"
          @click="handleOk('formModel')"
          >{{ isSave ? '保存' : '编辑' }}
        </Button>
      </div>
    </Card>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Route } from "vue-router";
import { store } from "@/store/Store";
import { FormBloc } from "@/view/member/bloc/FormBloc";
import { Loading } from "@/base/Loading";
import { isEmpty } from "@/base/util/Strings";
import { getValidatePhone, getValidatePsd } from "@/base/util/Validate";
import CompanySeletorSingle from "@/component/CompanySeletorSingle.vue";

@Component({
  components: { CompanySeletorSingle },
})
export default class extends Vue {
  isSave :any = false
  beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
    next(async (vm) => {
     
      await vm.bloc.getLabelList(vm.bloc.form.companyId);
      if (!vm.isAdd) {
        await vm.bloc.load(vm.idx);
      }
      if (vm.tepee != 2) {
        //品牌商
        vm.bloc.getCompanyList(1, 100, "ASC");
        vm.bloc.getAllSort(1, 1000, "DESC");
      } else {
        vm.bloc.form.companyId = store.state.user.company.company.id;
        vm.bloc.form.agentId = store.state.user.agent.id;
      }
    });
  }

  get isAdd() {
    return !this.idx;
  }

  get idx() {
  
    if(this.$route.params.id){
      this.isSave = false
    }else{
      this.isSave = true
    }

    return Number(this.$route.params.id);
  }

  bloc: FormBloc = new FormBloc();
  btnload = new Loading();
  validatePsd = (rule: any, value: string, callback: any) => {
    if (isEmpty(value)) return callback(new Error("登录密码不能为空"));
    if (!getValidatePsd(value))
      return callback(new Error("密码由字母、数字、下划线组成且长度为6-20"));
    return callback();
  };
  validatePhone = (rule: any, value: string, callback: any) => {
    if (isEmpty(value)) return callback(new Error("登录账号不能为空"));
    if (!getValidatePhone(value))
      return callback(new Error("请输入正确的手机号码"));
    return callback();
  };
  ruleValidate = {
    // password: [
    //   {required: true, validator: this.validatePsd, trigger: 'blur'}
    // ],
    phone: [{ required: true, validator: this.validatePhone, trigger: "blur" }],
  };
  get tepee() {
    return store.state.user.tepee;
  }
  handleCancel() {
    this.$router.push({ path: `/member` });
  }

  handleOk(name) {
    if(this.isSave) { const formRef: any = this.$refs[name];
    formRef.validate((valid) => {
      if (valid) {
        this.saveFn();
      }
    })}
    this.isSave = !this.isSave
  }

  saveFn() {
    this.btnload.loading = true;
    const parmas = this.isAdd ? "" : this.idx;
    this.bloc
      .save(parmas)
      .then((res) => {
        this.$Message.success("保存成功");
        this.btnload.loading = false;
        this.handleCancel();
      })
      .catch((err) => {
        this.$Message.error(err.message);
        this.btnload.loading = false;
      });
  }

  companyChange(companyId: number) {
    this.bloc.form.companyId = companyId;
    this.bloc
      .getAllSort(this.bloc.angent.pageIndex, 1000, "DESC")
      .then((res) => {
        // this.bloc.getMemberData([companyId])
      })
      .finally(() => {});
  }

  checkChange1(data) {}
  checkChange2(data: []) {}
}
</script>

<style lang="less" scoped></style>
